<template>
    <el-container>
        <el-header class="header">
            <i class="el-icon-notebook-2 title"></i>
            <span class="title">Waiman博客-注册</span>
        </el-header>
        <el-main class="form">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="password" >
                    <el-input v-model="ruleForm.password" show-password></el-input>
                </el-form-item>
                <el-form-item label="用户头像" prop="imageUrl">
                    <el-upload
                            class="avatar-uploader"
                            action="/api/file/upload"
                            name="files"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="验证码" prop="verificationCode">
                    <el-input class="verificationCode" v-model="ruleForm.verificationCode"></el-input>
                    <img @click="codeImgHandle" class="codeImg"
                         src="/api/kaptcha/getVerificationCode" alt="点击更换验证">
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "Register",
        data() {
            return {
                imageUrl: '',
                ruleForm: {
                    username: '',
                    password: '',
                    verificationCode: '',
                    imageUrl: ''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ],
                    verificationCode: [
                        {required: true, message: '请输入验证码', trigger: 'blur'}
                    ],
                    imageUrl: [
                        {required: true, message: '请上传头像', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 校验验证码
                        _this.checkVerificationCode().then(res => {
                            if (res) {
                                _this.$axios.post("/api/register", this.ruleForm).then(res => {
                                    if (res.data.code = 1) {
                                        // 跳转登陆页面
                                        _this.$router.push("/login")
                                    }
                                })
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            codeImgHandle(e) {
                // 改变验证码
                e.target.src = "/api/kaptcha/getVerificationCode"
            },
            checkVerificationCode() {
                // 检验验证码
                return new Promise((resolve, reject) => {
                    this.$axios.post("/api/kaptcha/checkVerificationCode",
                        {verificationCode: this.ruleForm.verificationCode}).then(res => {
                        if (res.data.code == 0) {
                            resolve(true)
                        }
                    })
                })
            },
            handleAvatarSuccess(res, file) {
                console.log(res)
                this.imageUrl = URL.createObjectURL(file.raw);
                this.ruleForm.imageUrl = res.data.images[0];
            },
            beforeAvatarUpload(file) {
                console.log(file.type)
                const isImage = file.type.indexOf("image") != -1;
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isImage) {
                    this.$message.error('上传头像图片只能是 图片');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isImage && isLt2M;
            }
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    .title {
        font-size: 30px;
        font-weight: bolder;
    }

    .form {
        width: 600px;
        margin: 100px auto;
    }

    .header {
        width: 80%;
        margin: 20px auto;
    }

    .verificationCode {
        width: 76%;
    }

    .codeImg {
        border-radius: 5px;
        width: 100px;
        height: 38px;
        margin-top: -5px;
        margin-left: 10px;
    }
/*    头像上传插件*/
    .avatar-uploader {
        height: 100px;
        width: 100px;
        line-height: 100px;
        background: #fff;

    }
    .avatar-uploader .el-upload {
        height: 100px;
        width: 100px;
        line-height: 100px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

</style>